import React, {Component} from 'react'
import {observer} from 'mobx-react'
import {StoreManager} from "@/stores";
import * as PropTypes from 'prop-types'

@observer
class ErrorMessage extends Component {
    static propTypes = {
        showErrors: PropTypes.bool
    }

    static defaultProps = {
        showErrors: true
    }

    render() {
        const {name, showErrors, invalid, errors} = this.props
        let _invalid = invalid
        let _errors = errors
        if (name) {
            const store = StoreManager.get(name)
            if (store) {
                _invalid = store.invalid
                _errors = store.errors
            }
        }
        if (!showErrors || !_invalid) {
            return null
        }
        if (_errors.length === 1) {
            return <span className="input-error">{_errors[0]}</span>
        }
        return (
            <span className="errors">
			{_errors.map((error, index) => <span className="input-error" key={index}>{error}</span>)}
		</span>
        )
    }
}

export {ErrorMessage}